<template>
  <el-card>
    <div slot="header">
      <span>公开查询</span>
      <span class="desc-text ml10">公开查询后，无需登录查询数据，常用于成绩查询，提交反馈查询等业务</span>
    </div>
    <div class=" p10">
      <el-button type="primary" icon="el-icon-plus" class="mt10" @click="handleOpenPublicQuery()">
        添加公开查询
      </el-button>
      <el-card v-for="q in publicQueryList" :key="q.id" shadow="never" :body-style="{ padding: '20px' }" class="mt10">
        <div slot="header" class="clearfix">
          <span class="large-font-size"> {{ q.name }}</span>
          <span class="base-font-size text-placeholder-color ml5">
            {{ q.description }}
          </span>
          <span class="base-font-size text-placeholder-color ml5">
            {{ q.createTime }}
          </span>
          <el-button class="top-right-btn mr10" type="text" @click="handleOpenPublicQuery(q)">
            修改
          </el-button>
          <el-button type="text" class="text-danger top-right-btn" @click="handleDeleteQuery(q)">
            删除
          </el-button>
        </div>
        <el-switch
          v-model="q.openStatus"
          active-color="#13ce66"
          active-text="开启"
          inactive-text="关闭"
          @change="(val)=>{
            handlePublishChange(q,val)
          }"
        />
        <url-operate :link-url="`${queryDataLink}${q.id}`" />
      </el-card>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="公开查询"
      width="40%"
    >
      <el-form ref="queryForm" :model="form" label-width="90px">
        <el-form-item label="查询名" prop="name"
                      :rules="[
                        { required: true, message: '请输入查询名', trigger: 'change' } ]"
        >
          <el-input
            v-model="form.name"
            type="text"
            placeholder="请输入内容"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="查询描述" :rules="[
          { required: true, message: '请输入查询描述', trigger: 'change' } ]"
        >
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="查询条件">
          <el-button icon="el-icon-plus" circle @click="handleAddQueryField" />
          <div v-for="(q,index) in form.queryFields" :key="q.formItemId+index" class="mt5">
            <el-select v-model="q.formItemId" placeholder="请选择查询条件">
              <el-option
                v-for="item in allFields"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="q.method" class="ml10" placeholder="请选择查询条件">
              <el-option label="等于" value="EQ" />
              <el-option label="模糊" value="INCLUDE" />
            </el-select>
            <i class="el-icon-delete ml10 text-danger cursor-pointer" @click="form.queryFields.splice(index,1)" />
          </div>
        </el-form-item>
        <el-form-item label="显示字段">
          <el-select v-model="form.showFields" multiple
                     collapse-tags placeholder="请选择显示字段"
          >
            <el-option
              v-for="item in allFields"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="显示样式">
          <el-radio-group v-model="form.config.styleType">
            <el-radio label="TABLE">
              表格
            </el-radio>
            <el-radio label="CARD">
              卡片
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span>全部条件</span>
            <el-tooltip class="item" effect="dark" content="是否需要输入全部条件筛选" placement="left">
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <el-switch v-model="form.config.inputAllCondition" />
        </el-form-item>
        <el-form-item>
          <template #label>
            <span>允许修改</span>
            <el-tooltip class="item" effect="dark" content="开启后在允许修改搜索到的数据" placement="left">
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <el-switch v-model="form.config.allowModify" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePublicQuery">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import UrlOperate from "./UrlOperate"
import {
  deletePublicQueryRequest,
  getPublicQueryListRequest,
  getPublicQueryRequest,
  savePublicQueryRequest
} from "../../../api/project/publish"
import {listFormFieldsRequest} from "../../../api/project/form"

export default {
  name: 'PublicQuerySetting',
  components: {
    UrlOperate
  },
  data() {
    return {
      queryDataLink: '',
      formKey: '',
      publicQueryList: [],
      form: {
        queryFields: [],
        showFields: []
      },
      dialogVisible: false,

      // 全部字段
      allFields: []
    }
  },
  created() {
    this.formKey = this.$route.query.key
    let url = window.location.protocol + '//' + window.location.host
    this.queryDataLink = `${url}/q/${this.formKey}?qid=`
    this.getPublicQueryInfo()
    this.queryFormFields()
    this.resetForm()
  },
  methods: {
    // 查询问卷字段
    queryFormFields() {
      listFormFieldsRequest(this.formKey).then((res) => {
        this.allFields = res.data
      })
    },
    handlePublishChange(item, val) {
      item.status = val ? 1 : 0
      savePublicQueryRequest(item).then((res) => {
      })
    },
    handleAddQueryField() {
      this.form.queryFields.push({
        formItemId: null,
        method: null
      })
    },
    resetForm() {
      this.form = {
        name: null,
        description: null,
        queryFields: [{
          formItemId: null,
          method: null
        }],
        showFields: [],
        config: {
          inputAllCondition: false,
          allowModify: false,
          styleType: 'TABLE'
        }
      }
    },
    handleOpenPublicQuery(item) {
      if (!item) {
        this.resetForm()
      } else {
        // 复制item到form
        this.form = JSON.parse(JSON.stringify(item))
      }
      this.dialogVisible = true
    },
    handleDeleteQuery(item) {
      deletePublicQueryRequest(item).then((res) => {
        this.msgSuccess('保存成功')
        this.getPublicQueryInfo()
      })
    },
    savePublicQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.form.formKey = this.formKey
          savePublicQueryRequest(this.form).then((res) => {
            this.msgSuccess('保存成功')
            this.form = res.data
            this.resetForm()
            this.dialogVisible = false
            this.getPublicQueryInfo()
          })
        }
      })
    },
    getPublicQueryInfo() {
      getPublicQueryListRequest(this.formKey).then((res) => {
        if (res.data) {
          this.publicQueryList = res.data.map((item) => {
            item.openStatus = item.status === 1
            return item
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ext-label {
  color: #303133;
}

.query-card {
  height: 100px;
}
</style>
